<template>
  <div class="goods_list">
    <!-- 下拉刷新 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- 商品列表 -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
        <van-cell v-for="item in list" :key="item.id" @click="$router.push('/goods/detail/' + item.id)">
          <van-image :src="item.img_url" />
          <p class="shop_title">{{ item.title }}</p>
          <div class="bottom_box">
            <div class="price">
              <span class="newPrice">￥{{ item.sell_price }}</span>
              <s class="oldePrice">￥{{ item.market_price }}</s>
            </div>
            <div class="count">
              <span>热卖中</span>
              <span>剩{{ item.stock_quantity }}件</span>
            </div>
          </div>
        </van-cell>
        <van-cell v-for="item in list1" :key="item.id" @click="$router.push('/goods/detail/' + item.id)">
          <van-image :src="item.img_url" />
          <p class="shop_title">{{ item.title }}</p>
          <div class="bottom_box">
            <div class="price">
              <span class="newPrice">￥{{ item.sell_price }}</span>
              <s class="oldePrice">￥{{ item.market_price }}</s>
            </div>
            <div class="count">
              <span>热卖中</span>
              <span>剩{{ item.stock_quantity }}件</span>
            </div>
          </div>
        </van-cell>
        <!-- <van-cell v-for="item in list1" :key="item.id">
          <van-image :src="item.img_url" />
          <p class="shop_title">{{ item.title }}</p>
          <div class="bottom_box">
            <div class="price">
              <span class="newPrice">￥{{ item.sell_price }}</span>
              <s class="oldePrice">￥{{ item.market_price }}</s>
            </div>
            <div class="count">
              <span>热卖中</span>
              <span>剩{{ item.stock_quantity }}件</span>
            </div>
          </div>
        </van-cell> -->
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 商品列表
      list: [],
      list1: [],
      number: 1,
      // 是否处于加载中状态
      isLoading: false,
      // 控制商品列表加载状态
      loading: false,
      finished: false,
      flag: true
    }
  },
  created() {
    this.getshopList()
  },
  methods: {
    async getshopList() {
      const { data: res } = await this.$http.get('/api/getgoods?pageindex=' + this.number)
      // console.log(res)
      if (res.status !== 0) {
        return this.$toast.fail('商品列表获取失败')
      }
      this.list = res.message
      // console.log(this.list)
    },
    // 下拉刷新事件
    onRefresh() {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
        this.count++
      }, 500)
    },
    // 商品列表下拉加载事件
    async onLoad() {
      // console.log(123)
      // 异步更新数据
      if (this.flag) {
        this.flag = false
        this.number++
        const { data: res } = await this.$http.get('/api/getgoods?pageindex=' + this.number)
        // console.log(res.message)
        this.list1 = res.message
        this.loading = false
        this.finished = true
      }
      console.log(this.list)
      // this.getshopList()
    }
  }
}
</script>

<style scoped>
.van-list {
  display: flex;
  flex-wrap: wrap;
  margin: 5px 10px;
  justify-content: space-between;
}
.van-cell {
  width: 48%;
  margin: 10px 0;
  padding: 0;
  border: 1px solid #ccc;
}
.van-cell__value {
  text-align: center;
}
.van-image {
  padding: 10px;
}
.shop_title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: left;
  padding: 4px 10px;
  height: 49px;
}
.bottom_box {
  width: 100%;
  padding: 5px;
  text-align: left;
  background-color: #eee;
}
.price {
  padding: 0 10px;
}
.newPrice {
  color: red;
  margin-right: 20px;
  font-size: 16px;
}
.count {
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
}
.van-cell:nth-child(11) {
  width: 100% !important;
}
.van-image {
  min-height: 200px !important;
}
.van-image__error {
  background-color: #fff;
}
</style>
